<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../common/vue2/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p>{{message}}</p>
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{ counter }} times.</p>
      <div class="carousel">
        <transition name="fade" >
          <img :src="currentImage" :key="currentIndex" alt="Image Carousel" />
        </transition>
   
      </div>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
          counter: 0,
          currentIndex: 0,
          images: [
            "img/image01.png",
            "img/image02.png",
            "img/image03.png",
            "img/image04.png"
            // 更多图片...
          ],
          intervalId: null,
        },
        computed: {
          currentImage() {
            return this.images[this.currentIndex % this.images.length];
          },
        },
        methods: {
          greet: function (event) {
            // `this` 在方法里指向当前 Vue 实例
            alert("Hello " + this.name + "!");
            // `event` 是原生 DOM 事件
            if (event) {
              alert(event.target.tagName);
            }
          },
          nextImage() {
            this.currentIndex++;
          },
          prevImage() {
            this.currentIndex--;
          },
          startAutoPlay() {
            this.intervalId = setInterval(() => {
              this.nextImage();
            }, 30000); // 每3秒切换到下一张图片
          },
          stopAutoPlay() {
            if (this.intervalId) {
              clearInterval(this.intervalId);
              this.intervalId = null;
            }
          },
        },
        mounted() {
          this.startAutoPlay();
        },
        beforeDestroy() {
          this.stopAutoPlay();
        },
      });
    </script>

<style>  
  .fade-enter-active, .fade-leave-active {  
    transition: opacity 0.5s;  
  }  
  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {  
    opacity: 0;  
  }  
  </style>
  </body>
</html>
